<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PhotoSphereViewer - transition demo</title>

        <link rel="stylesheet" href="/dist/core/index.css" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="photosphere"></div>

        <script type="importmap">
            {
                "imports": {
                    "three": "/node_modules/three/build/three.module.js",
                    "lil-gui": "/node_modules/three/examples/jsm/libs/lil-gui.module.min.js",
                    "@photo-sphere-viewer/core": "/dist/core/index.module.js"
                }
            }
        </script>

        <script type="module">
            import { GUI } from 'lil-gui';
            import { Viewer, DEFAULTS } from '@photo-sphere-viewer/core';

            const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

            const panos = [
                {
                    url: baseUrl + 'sphere.jpg',
                    caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
                },
                {
                    url: baseUrl + 'sphere-test.jpg',
                    caption: 'Test sphere',
                },
            ];

            const viewer = new Viewer({
                container: 'photosphere',
                panorama: panos[0].url,
                caption: panos[0].caption,
                loadingImg: baseUrl + 'loader.gif',
            });

            let i = 0;
            const config = {
                enabled: true,
                speed_mode: 'duration',
                speed_duration: 1.5,
                speed_speed: 3,
                rotation: true,
                effect: 'fade',

                run() {
                    i = 1 - i;
                    viewer.setPanorama(panos[i].url, {
                        caption: panos[i].caption,
                        position: {
                            yaw: (((Math.random() - 0.5) * 3) / 2) * Math.PI,
                            pitch: (((Math.random() - 0.5) * 3) / 4) * Math.PI,
                        },
                        zoom: Math.random() * 60 + 20,
                    });
                }
            };

            const gui = new GUI({ title: 'Transition Options' });

            gui.add(config, 'enabled');
            gui.add(config, 'rotation');
            gui.add(config, 'effect', ['fade', 'black', 'white']);

            const speed = gui.addFolder('Speed/Duration');
            speed.add(config, 'speed_mode', ['duration', 'speed']).name('Mode');
            speed.add(config, 'speed_duration', 0.5, 10, 0.5).name('Duration (s)');
            speed.add(config, 'speed_speed', 0.5, 10, 0.5).name('Speed (rpm)');

            gui.add(config, 'run').name('Run');

            gui.onChange(() => {
                viewer.setOption('defaultTransition', !config.enabled ? null : {
                    rotation: config.rotation,
                    effect: config.effect,
                    speed: config.speed_mode === 'duration' ? config.speed_duration * 1000 : config.speed_speed + 'rpm',
                });
            });

            window.viewer = viewer;
        </script>
    </body>
</html>
